<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="60%"
    @open-change="handleVisibleChange" >
    <div>      
      <iframe :src="srcStr" frameborder="0" id="pdfFrame" ref="pdfFrame1" width="600px" height="600px"
        :style="styleObject"></iframe>
    </div>
  </BasicDrawer>
</template>
<script lang="ts">

import { defineComponent,  ref } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { getPDF } from '/@/utils/http/axios';
// pdfHttp
enum Api {
  PDFS = '/pdf',
}
export default defineComponent({
  components: { BasicDrawer },
  setup() {

    let styleObject = ref("")
    let srcStr = ref("")
    async function openPdf(id:number) {
      const url: string =await getPDF(Api.PDFS,{id:id})
      console.log("url", url);
      
      srcStr.value = url;
      styleObject.value = "display:block"

    }

    function closePdf() {
      
      srcStr.value = "";
      styleObject.value = "display:none"

    }
    let pdfId=ref(0)
    const [register] = useDrawerInner((data) => {
      pdfId.value = data.id
    });
    function handleVisibleChange(visible) {
      
      if(visible){
        openPdf(pdfId.value);
      }   
      else{
        closePdf();
      }
        
    }
    return { register, openPdf, styleObject, srcStr,  handleVisibleChange };
  },
});
</script>
